<template>
    <div class="app-container">
        <div class="app-body">
            <div class="custom-table-header">
                <div class="custom-table-header-action">
                    <div
                            class="refresh-button"
                            @click="refresh">
                        <i class="el-icon-refresh"></i>
                    </div>
                    <el-button
                            type="primary"
                            size="small"
                            @click="handleCreate">新增
                    </el-button>
                </div>
            </div>

            <el-table
                    :data="list"
                    row-key="id"
                    border
                    style="height: 100%"
                    default-expand-all
                    :tree-props="{ children: 'children' }"
                    size="mini">
                <el-table-column
                        prop="name"
                        label="名称"
                        align="left"
                        width="260" />
                <el-table-column
                        prop="icon"
                        label="图标"
                        align="center"
                        width="100">
                    <template #default="scope">
                        <icon-svg
                                :name="scope.row.icon"
                                v-if="scope.row.icon" />
                    </template>
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="类型"
                        align="center"
                        width="100">
                    <template #default="scope">
                        <el-tag effect="dark">{{ typeOptions[scope.row.type] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="router"
                        label="节点路由"
                        align="center"
                        width="240" />
                <el-table-column
                        prop="keepAlive"
                        label="路由缓存"
                        align="center"
                        width="100">
                    <template #default="scope">
                        <div v-if="scope.row.type == 1">
                            <i
                                    class="el-icon-check"
                                    v-if="scope.row.keepAlive"></i>
                            <i
                                    class="el-icon-close"
                                    v-else></i>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="viewPath"
                        label="文件路径"
                        align="center"
                        show-overflow-tooltip />
                <el-table-column
                        prop="create_at"
                        label="更新时间"
                        align="center"
                        width="150" />
                <el-table-column
                        label="操作"
                        fixed="right"
                        align="center"
                        width="150">
                    <template #default="scope">
                        <el-button
                                type="text"
                                size="mini"
                                @click="handleCreateToRaw(scope.row.id)">新增
                        </el-button>
                        <el-button
                                type="text"
                                size="mini"
                                @click="handleEdit(scope.row)">编辑
                        </el-button>
                        <el-button
                                type="text"
                                size="mini"
                                @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
                :title="dialogTitleMap[dialogStatus]"
                v-model="dialogFormVisible"
                :close-on-click-modal="false"
                style="width: 960px">
            <el-form
                    ref="dataForm"
                    :rules="rules"
                    :model="temp"
                    label-width="100px">
                <el-form-item
                        label="节点类型"
                        prop="type">
                    <el-radio-group v-model="temp.type">
                        <el-radio :label="0">目录</el-radio>
                        <el-radio :label="1">菜单</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                        label="节点名称"
                        prop="name"
                        required>
                    <el-input
                            v-model="temp.name"
                            placeholder="请输入节点名称"></el-input>
                </el-form-item>
                <el-form-item
                        label="上级节点"
                        prop="parentId">
                    <MenuTree
                            v-model:value="temp.parentId"
                            :menuList="menuList" />
                </el-form-item>
                <el-form-item
                        label="节点路由"
                        prop="router"
                        v-if="temp.type == 1">
                    <el-input
                            v-model="temp.router"
                            placeholder="请输入节点路由" />
                </el-form-item>
                <el-form-item
                        label="路由缓存"
                        prop="keepAlive"
                        v-if="temp.type == 1">
                    <el-radio-group v-model="temp.keepAlive">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                        prop="isShow"
                        label="是否显示">
                    <el-switch v-model="temp.isShow" />
                </el-form-item>
                <el-form-item
                        label="文件路径"
                        prop="viewPath"
                        v-if="temp.type == 1">
                    <MenuFilePath
                            v-model:value="temp.viewPath"
                            placeholder="请选择" />
                </el-form-item>
                <el-form-item
                        prop="icon"
                        label="节点图标">
                    <MenuIcons v-model:value="temp.icon" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button
                        type="success"
                        @click="dialogStatus === 'create' ? createData() : updateData()">
                    确定
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import {reactive, toRefs, ref} from "vue";
    // import { ElNotification, ElMessageBox,ElMessage } from 'element-plus'
    import {getMenuList} from "@/api/user";
    import {deepTree} from "@/utils";
    import _ from "lodash";
    import MenuTree from "@/components/menu-tree";
    import MenuIcons from "@/components/menu-icons";
    import MenuFilePath from "@/components/menu-file-path";

    export default {
        components: {MenuTree, MenuIcons, MenuFilePath},
        setup() {
            const dataForm = ref(null);
            const state = reactive({
                menuList: [],
                list: [],
                typeOptions: {
                    0: "目录",
                    1: "菜单",
                },
                dialogFormVisible: false,
                dialogTitleMap: {
                    update: "Edit",
                    create: "Create",
                },
                dialogStatus: "",
                temp: {
                    type: 0,
                    name: "",
                    parentId: "",
                    isShow: true,
                    icon: "",
                    router: "",
                    keepAlive: 1,
                    viewPath: "",
                },
                rules: {
                    name: [{required: true, message: "节点名称必须", trigger: "blur"}],
                },
            });

            const refresh = () => {
                queryMenuList();
            };

            const queryMenuList = async () => {
                const result = await getMenuList();
                if (result.code == 200) {
                    state.menuList = _.cloneDeep(result.data);
                    state.list = deepTree(result.data);
                }
            };

            const resetTemp = () => {
                state.temp = {
                    type: 0,
                    name: "",
                    parentId: "",
                    isShow: true,
                    icon: "",
                    router: "",
                    keepAlive: 1,
                    viewPath: "",
                };
            };

            const handleCreate = () => {
                resetTemp();
                state.dialogStatus = "create";
                state.dialogFormVisible = true;
            };

            const handleCreateToRaw = (parentId) => {
                resetTemp();
                state.temp.parentId = parentId;
                state.dialogStatus = "create";
                state.dialogFormVisible = true;
            };

            const handleEdit = (row) => {
                state.temp = Object.assign({}, row);
                state.dialogStatus = "update";
                state.dialogFormVisible = true;
            };

            const createData = () => {
                dataForm.value.validate((valid) => {
                    if (valid) {
                        //提交数据重新请求
                        state.dialogFormVisible = false;
                        ElNotification({
                            title: "Success",
                            message: "创建成功",
                            type: "success",
                            duration: 2000,
                        });
                    }
                });
            };

            const updateData = () => {
                dataForm.value.validate((valid) => {
                    if (valid) {
                        //提交数据 重新请求
                        state.dialogFormVisible = false;
                        ElNotification({
                            title: "Success",
                            message: "更新完成",
                            type: "success",
                            duration: 2000,
                        });
                    }
                });
            };

            const handleDelete = (row) => {
                ElMessageBox.confirm(`是否删除 ${row.name}？`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        ElMessage.success("删除成功!");
                    })
                    .catch(() => {
                        console.log("已取消删除");
                    });
            };

            refresh();

            return {
                dataForm,
                ...toRefs(state),
                refresh,
                getMenuList,
                handleCreate,
                handleCreateToRaw,
                handleEdit,
                createData,
                updateData,
                handleDelete,
            };
        },
    };
</script>

<style
        lang="scss"
        scoped></style>